റിയാക്ടിന്റെ രഹസ്യക്കൂട്ട്: റീകൺസിലിയേഷൻ അൽഗോരിതം, വെർച്വൽ ഡോം ഡിഫിംഗ് എന്നിവയുടെ ആഴത്തിലുള്ള വിശകലനം

` ഇങ്ങനെ പ്രതിനിധീകരിക്കാം:

{ type: 'div', props: { className: 'container', children: 'Hello World' } }

ഇവ വെറും ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജക്റ്റുകൾ ആയതുകൊണ്ട്, ഇവയെ ഉണ്ടാക്കുന്നതും മാനിപ്പുലേറ്റ് ചെയ്യുന്നതും അവിശ്വസനീയമാംവിധം വേഗതയുള്ളതാണ്. ഇതിൽ ബ്രൗസർ API-കളുമായി ഒരു ഇടപെടലും ഉൾപ്പെടുന്നില്ല, അതിനാൽ റീഫ്ലോകളോ റീപെയിന്റുകളോ ഇല്ല.

വെർച്വൽ ഡോം എങ്ങനെ പ്രവർത്തിക്കുന്നു?

വിഡോം, യുഐ ഡെവലപ്‌മെന്റിൽ ഒരു ഡിക്ലറേറ്റീവ് സമീപനം സാധ്യമാക്കുന്നു. ഡോം എങ്ങനെ ഘട്ടം ഘട്ടമായി മാറ്റണമെന്ന് ബ്രൗസറിനോട് പറയുന്നതിന് പകരം (ഇംപറേറ്റീവ്), ഒരു നിശ്ചിത സ്റ്റേറ്റിന് യുഐ എങ്ങനെയായിരിക്കണമെന്ന് നിങ്ങൾ പ്രഖ്യാപിക്കുക മാത്രം ചെയ്യുന്നു (ഡിക്ലറേറ്റീവ്). ബാക്കിയുള്ളവ റിയാക്ട് കൈകാര്യം ചെയ്യും.

പ്രക്രിയ ഇങ്ങനെയാണ്:

1. പ്രാരംഭ റെൻഡർ: നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ആദ്യം ലോഡ് ചെയ്യുമ്പോൾ, റിയാക്ട് നിങ്ങളുടെ യുഐക്കായി ഒരു സമ്പൂർണ്ണ വെർച്വൽ ഡോം ട്രീ സൃഷ്ടിക്കുകയും അത് ഉപയോഗിച്ച് പ്രാരംഭ യഥാർത്ഥ ഡോം ഉണ്ടാക്കുകയും ചെയ്യുന്നു.
2. സ്റ്റേറ്റ് അപ്ഡേറ്റ്: ആപ്ലിക്കേഷന്റെ സ്റ്റേറ്റ് മാറുമ്പോൾ (ഉദാഹരണത്തിന്, ഒരു ഉപയോക്താവ് ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ), പുതിയ സ്റ്റേറ്റിനെ പ്രതിഫലിപ്പിക്കുന്ന ഒരു പുതിയ വെർച്വൽ ഡോം ട്രീ റിയാക്ട് സൃഷ്ടിക്കുന്നു.
3. ഡിഫിംഗ്: ഇപ്പോൾ റിയാക്ടിന്റെ മെമ്മറിയിൽ രണ്ട് വെർച്വൽ ഡോം ട്രീകൾ ഉണ്ട്: പഴയതും (സ്റ്റേറ്റ് മാറ്റത്തിന് മുമ്പുള്ളത്) പുതിയതും. തുടർന്ന് ഈ രണ്ട് ട്രീകളെയും താരതമ്യം ചെയ്യാനും കൃത്യമായ വ്യത്യാസങ്ങൾ കണ്ടെത്താനും അതിന്റെ "ഡിഫിംഗ്" അൽഗോരിതം പ്രവർത്തിപ്പിക്കുന്നു.
4. ബാച്ചിംഗും അപ്ഡേറ്റിംഗും: യഥാർത്ഥ ഡോമിനെ പുതിയ വെർച്വൽ ഡോമുമായി പൊരുത്തപ്പെടുത്തുന്നതിന് ആവശ്യമായ ഏറ്റവും കാര്യക്ഷമവും കുറഞ്ഞതുമായ പ്രവർത്തനങ്ങൾ റിയാക്ട് കണക്കാക്കുന്നു. ഈ പ്രവർത്തനങ്ങൾ ഒരുമിച്ച് ചേർത്ത് ഒപ്റ്റിമൈസ് ചെയ്ത ഒരൊറ്റ ശ്രേണിയിൽ യഥാർത്ഥ ഡോമിൽ പ്രയോഗിക്കുന്നു.

അപ്‌ഡേറ്റുകൾ ബാച്ച് ചെയ്യുന്നതിലൂടെ, റിയാക്ട് വേഗത കുറഞ്ഞ ഡോമുമായുള്ള നേരിട്ടുള്ള ഇടപെടൽ കുറയ്ക്കുകയും പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു. ഈ കാര്യക്ഷമതയുടെ കാതൽ "ഡിഫിംഗ്" ഘട്ടത്തിലാണ്, ഇതിനെ ഔദ്യോഗികമായി റീകൺസിലിയേഷൻ അൽഗോരിതം എന്ന് പറയുന്നു.

റിയാക്ടിന്റെ ഹൃദയം: റീകൺസിലിയേഷൻ അൽഗോരിതം

റീകൺസിലിയേഷൻ എന്നത് ഏറ്റവും പുതിയ കമ്പോണന്റ് ട്രീയുമായി പൊരുത്തപ്പെടുന്നതിന് റിയാക്ട് ഡോം അപ്‌ഡേറ്റ് ചെയ്യുന്ന പ്രക്രിയയാണ്. ഈ താരതമ്യം നടത്തുന്ന അൽഗോരിതത്തെയാണ് നമ്മൾ "ഡിഫിംഗ് അൽഗോരിതം" എന്ന് വിളിക്കുന്നത്.

സൈദ്ധാന്തികമായി, ഒരു ട്രീയെ മറ്റൊന്നിലേക്ക് മാറ്റുന്നതിനുള്ള ഏറ്റവും കുറഞ്ഞ പരിവർത്തനങ്ങളുടെ എണ്ണം കണ്ടെത്തുന്നത് വളരെ സങ്കീർണ്ണമായ ഒരു പ്രശ്നമാണ്, ഇതിന്റെ അൽഗോരിതം സങ്കീർണ്ണത O(n³) ക്രമത്തിലാണ്, ഇവിടെ n എന്നത് ട്രീയിലെ നോഡുകളുടെ എണ്ണമാണ്. ഇത് യഥാർത്ഥ ലോക ആപ്ലിക്കേഷനുകൾക്ക് വളരെ വേഗത കുറഞ്ഞതായിരിക്കും. ഇത് പരിഹരിക്കാൻ, റിയാക്ട് ടീം വെബ് ആപ്ലിക്കേഷനുകൾ സാധാരണയായി എങ്ങനെ പെരുമാറുന്നു എന്നതിനെക്കുറിച്ച് ചില മികച്ച നിരീക്ഷണങ്ങൾ നടത്തുകയും O(n) സമയത്ത് പ്രവർത്തിക്കുന്ന, വളരെ വേഗതയേറിയ ഒരു ഹ്യൂറിസ്റ്റിക് അൽഗോരിതം നടപ്പിലാക്കുകയും ചെയ്തു.

ഹ്യൂറിസ്റ്റിക്സ്: ഡിഫിംഗിനെ വേഗതയേറിയതും പ്രവചിക്കാവുന്നതുമാക്കുന്നു

റിയാക്ടിന്റെ ഡിഫിംഗ് അൽഗോരിതം രണ്ട് പ്രാഥമിക അനുമാനങ്ങളിലോ ഹ്യൂറിസ്റ്റിക്സിലോ നിർമ്മിച്ചതാണ്:

ഹ്യൂറിസ്റ്റിക് 1: വ്യത്യസ്ത ഘടക തരങ്ങൾ വ്യത്യസ്ത ട്രീകൾ ഉണ്ടാക്കുന്നു

ഇതാണ് ആദ്യത്തെതും ഏറ്റവും ലളിതവുമായ നിയമം. രണ്ട് വിഡോം നോഡുകളെ താരതമ്യം ചെയ്യുമ്പോൾ, റിയാക്ട് ആദ്യം അവയുടെ തരം നോക്കുന്നു. റൂട്ട് ഘടകങ്ങളുടെ തരം വ്യത്യസ്തമാണെങ്കിൽ, ഒന്നിനെ മറ്റൊന്നിലേക്ക് മാറ്റാൻ ഡെവലപ്പർ ആഗ്രഹിക്കുന്നില്ലെന്ന് റിയാക്ട് അനുമാനിക്കുന്നു. പകരം, ഇത് കൂടുതൽ കർശനവും എന്നാൽ പ്രവചിക്കാവുന്നതുമായ ഒരു സമീപനം സ്വീകരിക്കുന്നു:

• ഇത് പഴയ ട്രീയെ പൂർണ്ണമായും പൊളിച്ചുമാറ്റുന്നു, പഴയ എല്ലാ കമ്പോണന്റുകളും അൺമൗണ്ട് ചെയ്യുകയും അവയുടെ സ്റ്റേറ്റ് നശിപ്പിക്കുകയും ചെയ്യുന്നു.
• പുതിയ ഘടക തരത്തെ അടിസ്ഥാനമാക്കി ഇത് ആദ്യം മുതൽ ഒരു പുതിയ ട്രീ നിർമ്മിക്കുന്നു.

ഉദാഹരണത്തിന്, ഈ മാറ്റം പരിഗണിക്കുക:

മുൻപ്: <div><Counter /></div>
ശേഷം: <span><Counter /></span>

ചൈൽഡ് `Counter` കമ്പോണന്റ് ഒന്നുതന്നെയാണെങ്കിലും, റൂട്ട് `div` ൽ നിന്ന് `span` ലേക്ക് മാറിയതായി റിയാക്ട് കാണുന്നു. ഇത് പഴയ `div`-നെയും അതിനുള്ളിലെ `Counter` ഇൻസ്റ്റൻസിനെയും (അതിന്റെ സ്റ്റേറ്റ് നഷ്ടപ്പെടുത്തി) പൂർണ്ണമായും അൺമൗണ്ട് ചെയ്യുകയും തുടർന്ന് ഒരു പുതിയ `span`-നെയും `Counter`-ന്റെ ഒരു പുതിയ ഇൻസ്റ്റൻസിനെയും മൗണ്ട് ചെയ്യുകയും ചെയ്യും.

പ്രധാന പാഠം: ഒരു കമ്പോണന്റ് സബ്ട്രീയുടെ സ്റ്റേറ്റ് നിലനിർത്താനോ അല്ലെങ്കിൽ ആ സബ്ട്രീയുടെ പൂർണ്ണമായ പുനർ-റെൻഡറിംഗ് ഒഴിവാക്കാനോ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അതിന്റെ റൂട്ട് ഘടകത്തിന്റെ തരം മാറ്റുന്നത് ഒഴിവാക്കുക.

ഹ്യൂറിസ്റ്റിക് 2: `key` പ്രോപ്പ് ഉപയോഗിച്ച് ഡെവലപ്പർമാർക്ക് സ്ഥിരതയുള്ള ഘടകങ്ങളെക്കുറിച്ച് സൂചന നൽകാം

ഡെവലപ്പർമാർക്ക് മനസ്സിലാക്കാനും ശരിയായി പ്രയോഗിക്കാനും കഴിയുന്ന ഏറ്റവും നിർണായകമായ ഹ്യൂറിസ്റ്റിക് ഇതാണ്. റിയാക്ട് ചൈൽഡ് ഘടകങ്ങളുടെ ഒരു ലിസ്റ്റ് താരതമ്യം ചെയ്യുമ്പോൾ, അതിന്റെ ഡിഫോൾട്ട് സ്വഭാവം ഒരേ സമയം രണ്ട് ലിസ്റ്റുകളിലൂടെയും കടന്നുപോവുകയും എവിടെയെങ്കിലും വ്യത്യാസമുണ്ടെങ്കിൽ ഒരു മ്യൂട്ടേഷൻ ഉണ്ടാക്കുകയും ചെയ്യുക എന്നതാണ്.

ഇൻഡെക്സ് അടിസ്ഥാനമാക്കിയുള്ള ഡിഫിംഗിന്റെ പ്രശ്നം

നമുക്ക് ഒരു ലിസ്റ്റ് ഇനങ്ങളുണ്ടെന്നും കീ-കൾ ഉപയോഗിക്കാതെ ലിസ്റ്റിന്റെ തുടക്കത്തിൽ ഒരു പുതിയ ഇനം ചേർക്കുന്നുവെന്നും സങ്കൽപ്പിക്കുക.

പ്രാരംഭ ലിസ്റ്റ്:

• ഇനം B
• ഇനം C

അപ്ഡേറ്റ് ചെയ്ത ലിസ്റ്റ് ('ഇനം A' തുടക്കത്തിൽ ചേർക്കുക):

• ഇനം A
• ഇനം B
• ഇനം C

കീ-കൾ ഇല്ലാതെ, റിയാക്ട് ഒരു ലളിതമായ, ഇൻഡെക്സ് അടിസ്ഥാനമാക്കിയുള്ള താരതമ്യം നടത്തുന്നു:

1. ഇത് പഴയ ലിസ്റ്റിലെ ഇൻഡെക്സ് 0-ലുള്ള ഇനത്തെ ('ഇനം B') പുതിയ ലിസ്റ്റിലെ ഇൻഡെക്സ് 0-ലുള്ള ഇനവുമായി ('ഇനം A') താരതമ്യം ചെയ്യുന്നു. അവ വ്യത്യസ്തമാണ്, അതിനാൽ ഇത് ആദ്യത്തെ ഇനത്തെ മ്യൂട്ടേറ്റ് ചെയ്യുന്നു.
2. ഇത് പഴയ ലിസ്റ്റിലെ ഇൻഡെക്സ് 1-ലുള്ള ഇനത്തെ ('ഇനം C') പുതിയ ലിസ്റ്റിലെ ഇൻഡെക്സ് 1-ലുള്ള ഇനവുമായി ('ഇനം B') താരതമ്യം ചെയ്യുന്നു. അവ വ്യത്യസ്തമാണ്, അതിനാൽ ഇത് രണ്ടാമത്തെ ഇനത്തെ മ്യൂട്ടേറ്റ് ചെയ്യുന്നു.
3. ഇൻഡെക്സ് 2-ൽ ഒരു പുതിയ ഇനം ('ഇനം C') ഉണ്ടെന്ന് കാണുകയും അത് ചേർക്കുകയും ചെയ്യുന്നു.

ഇത് വളരെ കാര്യക്ഷമമല്ലാത്തതാണ്. റിയാക്ട് രണ്ട് അനാവശ്യ മ്യൂട്ടേഷനുകളും ഒരു ഇൻസെർഷനും നടത്തി, എന്നാൽ തുടക്കത്തിൽ ഒരൊറ്റ ഇൻസെർഷൻ മാത്രമേ ആവശ്യമുള്ളൂ. ഈ ലിസ്റ്റ് ഇനങ്ങൾ അവരുടേതായ സ്റ്റേറ്റുള്ള സങ്കീർണ്ണമായ കമ്പോണന്റുകൾ ആയിരുന്നെങ്കിൽ, ഇത് ഗുരുതരമായ പ്രകടന പ്രശ്നങ്ങൾക്കും ബഗുകൾക്കും കാരണമാകുമായിരുന്നു, കാരണം കമ്പോണന്റുകൾക്കിടയിൽ സ്റ്റേറ്റ് ആശയക്കുഴപ്പത്തിലാകാം.

`key` പ്രോപ്പിന്റെ ശക്തി

`key` പ്രോപ്പ് ഒരു പരിഹാരം നൽകുന്നു. ഘടകങ്ങളുടെ ലിസ്റ്റുകൾ ഉണ്ടാക്കുമ്പോൾ നിങ്ങൾ ഉൾപ്പെടുത്തേണ്ട ഒരു പ്രത്യേക സ്ട്രിംഗ് ആട്രിബ്യൂട്ടാണിത്. കീ-കൾ ഓരോ ഘടകത്തിനും റിയാക്ടിന് ഒരു സ്ഥിരതയുള്ള ഐഡന്റിറ്റി നൽകുന്നു.

സ്ഥിരവും അതുല്യവുമായ കീ-കളോടെ ഇതേ ഉദാഹരണം നമുക്ക് വീണ്ടും പരിശോധിക്കാം:

പ്രാരംഭ ലിസ്റ്റ്:

• ഇനം B
• ഇനം C

അപ്ഡേറ്റ് ചെയ്ത ലിസ്റ്റ്:

• ഇനം A
• ഇനം B
• ഇനം C

ഇപ്പോൾ, റിയാക്ടിന്റെ ഡിഫിംഗ് പ്രക്രിയ വളരെ മികച്ചതാണ്:

1. റിയാക്ട് പുതിയ ലിസ്റ്റിലെ ചൈൽഡുകളെ നോക്കുകയും 'b', 'c' എന്നീ കീ-കളുള്ള ഘടകങ്ങൾ കണ്ടെത്തുകയും ചെയ്യുന്നു.
2. 'b', 'c' എന്നീ കീ-കളുള്ള ഘടകങ്ങൾ പഴയ ലിസ്റ്റിൽ ഇതിനകം നിലവിലുണ്ടെന്ന് അതിനറിയാം, അതിനാൽ അവയെ അത് നീക്കുക മാത്രം ചെയ്യുന്നു.
3. മുമ്പ് നിലവിലില്ലാത്ത 'a' എന്ന കീ-യോടുകൂടിയ ഒരു പുതിയ ഘടകം ഉണ്ടെന്ന് അത് കാണുന്നു, അതിനാൽ അത് ഉണ്ടാക്കി ചേർക്കുന്നു.

ഇത് വളരെ കാര്യക്ഷമമാണ്. ഒരു ഇൻസെർഷൻ മാത്രമേ നടത്തേണ്ടതുള്ളൂ എന്ന് റിയാക്ട് ശരിയായി തിരിച്ചറിയുന്നു. 'b', 'c' എന്നീ കീ-കളുമായി ബന്ധപ്പെട്ട കമ്പോണന്റുകൾ സംരക്ഷിക്കപ്പെടുകയും അവയുടെ ആന്തരിക സ്റ്റേറ്റ് നിലനിർത്തുകയും ചെയ്യുന്നു.

കീകൾക്കുള്ള നിർണായക നിയമം: കീകൾ സഹോദര ഘടകങ്ങൾക്കിടയിൽ സ്ഥിരവും, പ്രവചിക്കാവുന്നതും, അതുല്യവും ആയിരിക്കണം. ലിസ്റ്റ് എപ്പോഴെങ്കിലും പുനഃക്രമീകരിക്കുകയോ, ഫിൽട്ടർ ചെയ്യുകയോ, അല്ലെങ്കിൽ മധ്യത്തിൽ നിന്ന് ഇനങ്ങൾ ചേർക്കുകയോ/നീക്കം ചെയ്യുകയോ ചെയ്യുകയാണെങ്കിൽ, അറേ ഇൻഡെക്സ് ഒരു കീ ആയി ഉപയോഗിക്കുന്നത് (`items.map((item, index) =>

...

)`) ഒരു ആന്റി-പാറ്റേൺ ആണ്, കാരണം ഇത് കീ ഇല്ലാത്തതിന് തുല്യമായ പ്രശ്നങ്ങളിലേക്ക് നയിക്കുന്നു. നിങ്ങളുടെ ഡാറ്റയിൽ നിന്നുള്ള ഡാറ്റാബേസ് ഐഡി പോലുള്ള അതുല്യമായ ഐഡന്റിഫയറുകളാണ് ഏറ്റവും മികച്ച കീകൾ.

പരിണാമം: സ്റ്റാക്കിൽ നിന്ന് ഫൈബർ ആർക്കിടെക്ചറിലേക്ക്

മുകളിൽ വിവരിച്ച റീകൺസിലിയേഷൻ അൽഗോരിതം വർഷങ്ങളോളം റിയാക്ടിന്റെ അടിസ്ഥാനമായിരുന്നു. എന്നിരുന്നാലും, ഇതിന് ഒരു പ്രധാന പരിമിതിയുണ്ടായിരുന്നു: ഇത് സിൻക്രണസും ബ്ലോക്കിംഗും ആയിരുന്നു. ഈ യഥാർത്ഥ നടപ്പാക്കലിനെ ഇപ്പോൾ സ്റ്റാക്ക് റീകൺസിലിയർ എന്ന് പറയുന്നു.

പഴയ രീതി: സ്റ്റാക്ക് റീകൺസിലിയർ

സ്റ്റാക്ക് റീകൺസിലിയറിൽ, ഒരു സ്റ്റേറ്റ് അപ്ഡേറ്റ് ഒരു പുനർ-റെൻഡറിംഗിന് കാരണമാകുമ്പോൾ, റിയാക്ട് മുഴുവൻ കമ്പോണന്റ് ട്രീയിലൂടെയും ആവർത്തനമായി സഞ്ചരിക്കുകയും, മാറ്റങ്ങൾ കണക്കാക്കുകയും, അവയെ ഡോമിൽ പ്രയോഗിക്കുകയും ചെയ്യുമായിരുന്നു - എല്ലാം ഒരൊറ്റ, തടസ്സമില്ലാത്ത ശ്രേണിയിൽ. ചെറിയ അപ്‌ഡേറ്റുകൾക്ക്, ഇത് കുഴപ്പമില്ലായിരുന്നു. എന്നാൽ വലിയ കമ്പോണന്റ് ട്രീകൾക്ക്, ഈ പ്രക്രിയയ്ക്ക് കാര്യമായ സമയം എടുത്തേക്കാം (ഉദാ. 16 മില്ലിസെക്കൻഡിൽ കൂടുതൽ), ഇത് ബ്രൗസറിന്റെ പ്രധാന ത്രെഡിനെ തടസ്സപ്പെടുത്തുന്നു. ഇത് യുഐ പ്രതികരണശേഷിയില്ലാത്തതാകാനും, ഫ്രെയിമുകൾ നഷ്ടപ്പെടാനും, ആനിമേഷനുകൾ തടസ്സപ്പെടാനും, മോശം ഉപയോക്തൃ അനുഭവത്തിനും കാരണമാകുമായിരുന്നു.

റിയാക്ട് ഫൈബർ അവതരിപ്പിക്കുന്നു (റിയാക്ട് 16+)

ഈ പ്രശ്നം പരിഹരിക്കുന്നതിനായി, റിയാക്ട് ടീം പ്രധാന റീകൺസിലിയേഷൻ അൽഗോരിതം പൂർണ്ണമായും മാറ്റിയെഴുതാൻ ഒരു ബഹുവർഷ പദ്ധതി ഏറ്റെടുത്തു. റിയാക്ട് 16-ൽ പുറത്തിറങ്ങിയ ഫലം റിയാക്ട് ഫൈബർ എന്ന് വിളിക്കപ്പെടുന്നു.

ഒരേ സമയം ഒന്നിലധികം ജോലികളിൽ പ്രവർത്തിക്കാനും മുൻഗണന അനുസരിച്ച് അവയ്ക്കിടയിൽ മാറാനുമുള്ള റിയാക്ടിന്റെ കഴിവ് - അതായത് കൺകറൻസി - പ്രാപ്തമാക്കുന്നതിനാണ് ഫൈബർ ആർക്കിടെക്ചർ ആദ്യം മുതൽ രൂപകൽപ്പന ചെയ്തത്.

ഒരു "ഫൈബർ" എന്നത് ഒരു യൂണിറ്റ് ഓഫ് വർക്കിനെ പ്രതിനിധീകരിക്കുന്ന ഒരു പ്ലെയിൻ ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജക്റ്റാണ്. ഇത് ഒരു കമ്പോണന്റിനെക്കുറിച്ചുള്ള വിവരങ്ങൾ, അതിന്റെ ഇൻപുട്ട് (പ്രോപ്സ്), അതിന്റെ ഔട്ട്പുട്ട് (ചൈൽഡ്സ്) എന്നിവ ഉൾക്കൊള്ളുന്നു. തടസ്സപ്പെടുത്താൻ കഴിയാത്ത ഒരു ആവർത്തന സഞ്ചാരത്തിന് പകരം, റിയാക്ട് ഇപ്പോൾ ഫൈബർ നോഡുകളുടെ ഒരു ലിങ്ക്ഡ് ലിസ്റ്റ് ഓരോന്നായി പ്രോസസ്സ് ചെയ്യുന്നു.

ഈ പുതിയ ആർക്കിടെക്ചർ നിരവധി പ്രധാന കഴിവുകൾ അൺലോക്ക് ചെയ്തു:

• ഇൻക്രിമെന്റൽ റെൻഡറിംഗ്: റെൻഡറിംഗ് ജോലിയെ ചെറിയ ഭാഗങ്ങളായി വിഭജിച്ച് ഒന്നിലധികം ഫ്രെയിമുകളിലായി വ്യാപിപ്പിക്കാൻ ഇതിന് കഴിയും.
• മുൻഗണന നൽകൽ: വ്യത്യസ്ത തരം അപ്‌ഡേറ്റുകൾക്ക് വ്യത്യസ്ത മുൻഗണനാ തലങ്ങൾ നൽകാൻ ഇതിന് കഴിയും. ഉദാഹരണത്തിന്, ഒരു ഇൻപുട്ട് ഫീൽഡിൽ ഉപയോക്താവ് ടൈപ്പുചെയ്യുന്നതിന് പശ്ചാത്തലത്തിൽ ഡാറ്റ ലഭ്യമാക്കുന്നതിനേക്കാൾ ഉയർന്ന മുൻഗണനയുണ്ട്.
• താൽക്കാലികമായി നിർത്താനും റദ്ദാക്കാനുമുള്ള കഴിവ്: ഉയർന്ന മുൻഗണനയുള്ള ഒന്നിനെ കൈകാര്യം ചെയ്യുന്നതിനായി താഴ്ന്ന മുൻഗണനയുള്ള ഒരു അപ്‌ഡേറ്റിലെ ജോലി താൽക്കാലികമായി നിർത്താനും, ആവശ്യമില്ലാത്ത ജോലി റദ്ദാക്കാനോ പുനരുപയോഗിക്കാനോ പോലും ഇതിന് കഴിയും.

ഫൈബറിന്റെ രണ്ട് ഘട്ടങ്ങൾ

ഫൈബറിന് കീഴിൽ, റെൻഡറിംഗ് പ്രക്രിയ രണ്ട് വ്യത്യസ്ത ഘട്ടങ്ങളായി വിഭജിച്ചിരിക്കുന്നു:

1. റെൻഡർ/റീകൺസിലിയേഷൻ ഘട്ടം (അസിൻക്രണസ്): ഈ ഘട്ടത്തിൽ, റിയാക്ട് ഒരു "വർക്ക്-ഇൻ-പ്രോഗ്രസ്" ട്രീ നിർമ്മിക്കാൻ ഫൈബർ നോഡുകൾ പ്രോസസ്സ് ചെയ്യുന്നു. ഇത് കമ്പോണന്റിന്റെ `render` മെത്തേഡുകൾ വിളിക്കുകയും ഡോമിൽ എന്ത് മാറ്റങ്ങൾ വരുത്തണമെന്ന് നിർണ്ണയിക്കാൻ ഡിഫിംഗ് അൽഗോരിതം പ്രവർത്തിപ്പിക്കുകയും ചെയ്യുന്നു. പ്രധാനമായും, ഈ ഘട്ടം തടസ്സപ്പെടുത്താവുന്നതാണ്. കൂടുതൽ പ്രാധാന്യമുള്ള എന്തെങ്കിലും കൈകാര്യം ചെയ്യാൻ റിയാക്ടിന് ഈ ജോലി താൽക്കാലികമായി നിർത്താനും പിന്നീട് പുനരാരംഭിക്കാനും കഴിയും. ഇത് തടസ്സപ്പെടുത്താൻ കഴിയുന്നതിനാൽ, ഒരു പൊരുത്തമില്ലാത്ത യുഐ സ്റ്റേറ്റ് ഒഴിവാക്കാൻ റിയാക്ട് ഈ ഘട്ടത്തിൽ യഥാർത്ഥ ഡോം മാറ്റങ്ങളൊന്നും പ്രയോഗിക്കുന്നില്ല.
2. കമ്മിറ്റ് ഘട്ടം (സിൻക്രണസ്): വർക്ക്-ഇൻ-പ്രോഗ്രസ് ട്രീ പൂർത്തിയായിക്കഴിഞ്ഞാൽ, റിയാക്ട് കമ്മിറ്റ് ഘട്ടത്തിലേക്ക് പ്രവേശിക്കുന്നു. ഇത് കണക്കാക്കിയ മാറ്റങ്ങൾ എടുത്ത് യഥാർത്ഥ ഡോമിൽ പ്രയോഗിക്കുന്നു. ഈ ഘട്ടം സിൻക്രണസും തടസ്സപ്പെടുത്താൻ കഴിയാത്തതുമാണ്. ഇത് ഉപയോക്താവിന് എല്ലായ്പ്പോഴും ഒരു സ്ഥിരതയുള്ള യുഐ കാണുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. `componentDidMount`, `componentDidUpdate` പോലുള്ള ലൈഫ് സൈക്കിൾ മെത്തേഡുകളും, `useLayoutEffect`, `useEffect` ഹുക്കുകളും ഈ ഘട്ടത്തിൽ പ്രവർത്തിക്കുന്നു.

റിയാക്ടിന്റെ `Suspense`, കൺകറന്റ് റെൻഡറിംഗ്, `useTransition`, `useDeferredValue` തുടങ്ങിയ ആധുനിക ഫീച്ചറുകൾക്കെല്ലാം അടിസ്ഥാനം ഫൈബർ ആർക്കിടെക്ചറാണ്, ഇവയെല്ലാം ഡെവലപ്പർമാർക്ക് കൂടുതൽ പ്രതികരണശേഷിയുള്ളതും സുഗമവുമായ യൂസർ ഇന്റർഫേസുകൾ നിർമ്മിക്കാൻ സഹായിക്കുന്നു.

ഡെവലപ്പർമാർക്കുള്ള പ്രായോഗിക ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ

റിയാക്ടിന്റെ റീകൺസിലിയേഷൻ പ്രക്രിയ മനസ്സിലാക്കുന്നത് നിങ്ങൾക്ക് കൂടുതൽ പ്രകടനക്ഷമമായ കോഡ് എഴുതാനുള്ള ശക്തി നൽകുന്നു. ചില പ്രവർത്തനപരമായ തന്ത്രങ്ങൾ ഇതാ:

1. ലിസ്റ്റുകൾക്കായി എല്ലായ്പ്പോഴും സ്ഥിരവും അതുല്യവുമായ കീ-കൾ ഉപയോഗിക്കുക

ഇത് എത്ര ഊന്നിപ്പറഞ്ഞാലും മതിയാവില്ല. ലിസ്റ്റുകൾക്കുള്ള ഏറ്റവും പ്രധാനപ്പെട്ട ഒപ്റ്റിമൈസേഷൻ ഇതാണ്. നിങ്ങളുടെ ഡാറ്റയിൽ നിന്നുള്ള ഒരു അതുല്യമായ ഐഡി ഉപയോഗിക്കുക (ഉദാ. `product.id`). ലിസ്റ്റ് പൂർണ്ണമായും സ്റ്റാറ്റിക് ആണെങ്കിൽ, ഒരിക്കലും മാറുകയില്ലെങ്കിൽ ഒഴികെ, അറേ ഇൻഡെക്സുകൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക.

2. അനാവശ്യമായ പുനർ-റെൻഡറിംഗുകൾ ഒഴിവാക്കുക

ഒരു കമ്പോണന്റിന്റെ സ്റ്റേറ്റ് മാറുകയോ അല്ലെങ്കിൽ അതിന്റെ പാരന്റ് പുനർ-റെൻഡർ ചെയ്യുകയോ ചെയ്താൽ അത് പുനർ-റെൻഡർ ചെയ്യും. ചിലപ്പോൾ, അതിന്റെ ഔട്ട്പുട്ട് ഒന്നുതന്നെയായിരിക്കുമ്പോഴും ഒരു കമ്പോണന്റ് പുനർ-റെൻഡർ ചെയ്യും. ഇത് തടയാൻ നിങ്ങൾക്ക് ഇവ ഉപയോഗിക്കാം:

• `React.memo()`: ഫംഗ്ഷൻ കമ്പോണന്റുകൾക്കായുള്ള ഒരു ഹയർ-ഓർഡർ കമ്പോണന്റ്. ഇത് കമ്പോണന്റിന്റെ പ്രോപ്പുകളുടെ ഒരു ഷാലോ താരതമ്യം നടത്തുന്നു. പ്രോപ്പുകൾ മാറിയിട്ടില്ലെങ്കിൽ, റിയാക്ട് കമ്പോണന്റ് പുനർ-റെൻഡർ ചെയ്യുന്നത് ഒഴിവാക്കുകയും അവസാനമായി റെൻഡർ ചെയ്ത ഫലം പുനരുപയോഗിക്കുകയും ചെയ്യും.
• `useCallback()`: ഒരു കമ്പോണന്റിനുള്ളിൽ നിർവചിച്ചിരിക്കുന്ന ഫംഗ്ഷനുകൾ ഓരോ റെൻഡറിലും വീണ്ടും സൃഷ്ടിക്കപ്പെടുന്നു. നിങ്ങൾ ഈ ഫംഗ്ഷനുകൾ `React.memo` ൽ പൊതിഞ്ഞ ഒരു ചൈൽഡ് കമ്പോണന്റിലേക്ക് പ്രോപ്പുകളായി കൈമാറുകയാണെങ്കിൽ, ഫംഗ്ഷൻ പ്രോപ്പ് സാങ്കേതികമായി ഓരോ തവണയും ഒരു പുതിയ ഫംഗ്ഷൻ ആയതിനാൽ ചൈൽഡ് പുനർ-റെൻഡർ ചെയ്യും. `useCallback` ഫംഗ്ഷനെത്തന്നെ മെമ്മോയിസ് ചെയ്യുന്നു, അതിന്റെ ഡിപെൻഡൻസികൾ മാറുമ്പോൾ മാത്രം അത് വീണ്ടും സൃഷ്ടിക്കപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.
• `useMemo()`: `useCallback`-ന് സമാനം, എന്നാൽ മൂല്യങ്ങൾക്കായി. ഇത് ചെലവേറിയ ഒരു കണക്കുകൂട്ടലിന്റെ ഫലം മെമ്മോയിസ് ചെയ്യുന്നു. അതിന്റെ ഡിപെൻഡൻസികളിലൊന്ന് മാറിയാൽ മാത്രമേ കണക്കുകൂട്ടൽ വീണ്ടും പ്രവർത്തിക്കൂ. ഓരോ റെൻഡറിലും ചെലവേറിയ കണക്കുകൂട്ടലുകൾ തടയുന്നതിനും പ്രോപ്പുകളായി കൈമാറുന്ന സ്ഥിരതയുള്ള ഒബ്ജക്റ്റ്/അറേ റഫറൻസുകൾ നിലനിർത്തുന്നതിനും ഇത് ഉപയോഗപ്രദമാണ്.

3. സ്മാർട്ട് കമ്പോണന്റ് കോമ്പോസിഷൻ

നിങ്ങളുടെ കമ്പോണന്റുകൾ ഘടന ചെയ്യുന്ന രീതി പ്രകടനത്തിൽ കാര്യമായ സ്വാധീനം ചെലുത്തും. നിങ്ങളുടെ കമ്പോണന്റിന്റെ ഒരു ഭാഗത്തെ സ്റ്റേറ്റ് അടിക്കടി അപ്ഡേറ്റ് ചെയ്യുന്നുണ്ടെങ്കിൽ, അത് ചെയ്യാത്ത ഭാഗങ്ങളിൽ നിന്ന് അതിനെ വേർതിരിക്കാൻ ശ്രമിക്കുക.

ഉദാഹരണത്തിന്, അടിക്കടി മാറുന്ന ഒരു ഇൻപുട്ട് ഫീൽഡ് മുഴുവൻ കമ്പോണന്റിനെയും പുനർ-റെൻഡർ ചെയ്യാൻ കാരണമാകുന്ന ഒരൊറ്റ വലിയ കമ്പോണന്റ് ഉണ്ടാക്കുന്നതിന് പകരം, ആ സ്റ്റേറ്റിനെ അതിന്റെ സ്വന്തം ചെറിയ കമ്പോണന്റിലേക്ക് ഉയർത്തുക. ഈ രീതിയിൽ, ഉപയോക്താവ് ടൈപ്പുചെയ്യുമ്പോൾ ആ ചെറിയ കമ്പോണന്റ് മാത്രം പുനർ-റെൻഡർ ചെയ്യും.

4. നീണ്ട ലിസ്റ്റുകൾ വെർച്വലൈസ് ചെയ്യുക

നൂറുകണക്കിന് അല്ലെങ്കിൽ ആയിരക്കണക്കിന് ഇനങ്ങളുള്ള ലിസ്റ്റുകൾ റെൻഡർ ചെയ്യേണ്ടതുണ്ടെങ്കിൽ, ശരിയായ കീ-കൾ ഉപയോഗിച്ചാൽ പോലും, അവയെല്ലാം ഒരേ സമയം റെൻഡർ ചെയ്യുന്നത് വേഗത കുറഞ്ഞതും ധാരാളം മെമ്മറി ഉപയോഗിക്കുന്നതുമാകാം. പരിഹാരം വെർച്വലൈസേഷൻ അല്ലെങ്കിൽ വിൻഡോയിംഗ് ആണ്. ഈ സാങ്കേതികതയിൽ വ്യൂപോർട്ടിൽ നിലവിൽ ദൃശ്യമാകുന്ന ഇനങ്ങളുടെ ഒരു ചെറിയ ഉപവിഭാഗം മാത്രം റെൻഡർ ചെയ്യുന്നത് ഉൾപ്പെടുന്നു. ഉപയോക്താവ് സ്ക്രോൾ ചെയ്യുമ്പോൾ, പഴയ ഇനങ്ങൾ അൺമൗണ്ട് ചെയ്യുകയും പുതിയ ഇനങ്ങൾ മൗണ്ട് ചെയ്യുകയും ചെയ്യുന്നു. `react-window`, `react-virtualized` പോലുള്ള ലൈബ്രറികൾ ഈ പാറ്റേൺ നടപ്പിലാക്കുന്നതിന് ശക്തവും ഉപയോഗിക്കാൻ എളുപ്പമുള്ളതുമായ കമ്പോണന്റുകൾ നൽകുന്നു.

ഉപസംഹാരം

റിയാക്ടിന്റെ പ്രകടനം ഒരു ആകസ്മികതയല്ല; അത് വെർച്വൽ ഡോം, കാര്യക്ഷമമായ റീകൺസിലിയേഷൻ അൽഗോരിതം എന്നിവയെ കേന്ദ്രീകരിച്ചുള്ള ഒരു ആസൂത്രിതവും സങ്കീർണ്ണവുമായ ആർക്കിടെക്ചറിന്റെ ഫലമാണ്. നേരിട്ടുള്ള ഡോം മാനിപ്പുലേഷൻ ഒഴിവാക്കുന്നതിലൂടെ, സ്വമേധയാ കൈകാര്യം ചെയ്യാൻ അവിശ്വസനീയമാംവിധം സങ്കീർണ്ണമായ രീതിയിൽ അപ്‌ഡേറ്റുകൾ ബാച്ച് ചെയ്യാനും ഒപ്റ്റിമൈസ് ചെയ്യാനും റിയാക്ടിന് കഴിയും.

ഡെവലപ്പർമാർ എന്ന നിലയിൽ, നമ്മൾ ഈ പ്രക്രിയയുടെ ഒരു നിർണായക ഭാഗമാണ്. ഡിഫിംഗ് അൽഗോരിതത്തിന്റെ ഹ്യൂറിസ്റ്റിക്സ് മനസ്സിലാക്കുന്നതിലൂടെ - കീ-കൾ ശരിയായി ഉപയോഗിക്കുക, കമ്പോണന്റുകളും മൂല്യങ്ങളും മെമ്മോയിസ് ചെയ്യുക, നമ്മുടെ ആപ്ലിക്കേഷനുകൾ ചിന്താപൂർവ്വം ഘടന ചെയ്യുക - നമുക്ക് റിയാക്ടിന്റെ റീകൺസിലിയറുമായി ചേർന്ന് പ്രവർത്തിക്കാൻ കഴിയും, അതിനെതിരെ അല്ല. ഫൈബർ ആർക്കിടെക്ചറിലേക്കുള്ള പരിണാമം സാധ്യമായതിന്റെ അതിരുകൾ കൂടുതൽ വികസിപ്പിച്ചു, ഇത് സുഗമവും പ്രതികരണശേഷിയുള്ളതുമായ യുഐകളുടെ ഒരു പുതിയ തലമുറയെ പ്രാപ്തമാക്കുന്നു.

അടുത്ത തവണ ഒരു സ്റ്റേറ്റ് മാറ്റത്തിന് ശേഷം നിങ്ങളുടെ യുഐ തൽക്ഷണം അപ്‌ഡേറ്റ് ആകുന്നത് കാണുമ്പോൾ, വെർച്വൽ ഡോം, ഡിഫിംഗ് അൽഗോരിതം, കമ്മിറ്റ് ഘട്ടം എന്നിവയുടെ മനോഹരമായ നൃത്തം പശ്ചാത്തലത്തിൽ നടക്കുന്നത് അഭിനന്ദിക്കാൻ ഒരു നിമിഷം എടുക്കുക. ഈ ധാരണ ആഗോള പ്രേക്ഷകർക്കായി വേഗതയേറിയതും കാര്യക്ഷമവും കൂടുതൽ കരുത്തുറ്റതുമായ റിയാക്ട് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള നിങ്ങളുടെ താക്കോലാണ്.